<template>
    <div class="allSongs" @scroll="handleScroll">
        <MusicList :data="allSongsList" />
        <div style="width: 100%;text-align: center;color: aliceblue;font-size: 14px;margin-top: 10px;"
            v-if="total === allSongsList.length">已到底部！！！</div>
        <div v-if="loader" class="logn">
            <div class="loader"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import MusicList from '@/components/musicList.vue';
import { getAllSongs } from '@/api/singer';
const route = useRoute();

const allSongsList = ref<Array<any>>([]);//设置歌曲列表
const loader = ref<boolean>(false);//设置加载器
const total = ref<number>(0);//设置总数

onMounted(() => {
    getAllTheSongs({ id: Number(route.query.id), limit: 20, offset: 0 })
})

// 定义一个异步函数，用于获取所有歌曲，参数为id，limit，offset
async function getAllTheSongs(params: { id: number, limit: number, offset: number }) {
    // 设置加载器为true
    loader.value = true;
    // 获取所有歌曲，参数为params
    const { data } = await getAllSongs(params);
    console.log(data);

    // 如果返回的状态码为200
    if (data.code === 200) {
        // 设置总数为data.total
        total.value = data.total;
        // 将data.songs添加到allSongsList中
        allSongsList.value.push(...data.songs);
        // 设置加载器为false
        loader.value = false;
    }
}

function handleScroll(e: Event) {
    // 如果total的值等于allSongsList的值，则返回
    if (total.value === allSongsList.value.length) return;
    // 如果loader的值存在，则返回
    if (loader.value) return;
    // 获取目标元素
    const target = e.target as HTMLDivElement;
    // 如果目标元素的滚动高度加上目标元素的高度大于等于目标元素的总高度减去1，则获取20条数据
    if (target.scrollTop + target.clientHeight >= target.scrollHeight - 1) {
        // 如果total的值大于等于allSongsList的值加上20，则获取20条数据
        if (total.value >= allSongsList.value.length + 20) {
            // 获取20条数据
            getAllTheSongs({ id: Number(route.query.id), limit: 20, offset: allSongsList.value.length })
        } else {
            // 获取15条数据
            getAllTheSongs({ id: Number(route.query.id), limit: total.value - allSongsList.value.length, offset: allSongsList.value.length })
        }

    }
}

</script>

<style lang="scss" scoped>
.allSongs {
    width: 100%;
    height: 87%;
    overflow: auto;
    margin-top: 10vh;
}

.allSongs::-webkit-scrollbar {
    display: none;
}

.logn {
    width: 100%;
    display: flex;
    justify-content: center;

    .loader {
        width: 15px;
        aspect-ratio: .75;
        --c: no-repeat linear-gradient(#ffffff 0 0);
        background:
            var(--c) 0% 50%,
            var(--c) 25% 50%,
            var(--c) 50% 50%,
            var(--c) 75% 50%,
            var(--c) 100% 50%;
        animation: l7 0.8s infinite linear alternate;
    }

    @keyframes l7 {
        0% {
            background-size: 10% 50%, 10% 50%, 10% 50%, 10% 50%, 10% 50%;
        }

        20% {
            background-size: 10% 20%, 10% 50%, 10% 70%, 10% 20%, 10% 50%;
        }

        40% {
            background-size: 10% 20%, 10% 50%, 10% 70%, 10% 50%, 10% 50%;
        }

        60% {
            background-size: 10% 50%, 10% 70%, 10% 50%, 10% 20%, 10% 80%;
        }

        80% {
            background-size: 10% 50%, 10% 70%, 10% 50%, 10% 70%, 10% 20%;
        }

        100% {
            background-size: 10% 50%, 10% 50%, 10% 50%, 10% 20%, 10% 40%;
        }
    }
}
</style>